<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
  <title>Star Emission</title>
  <meta name="description" content="">
  <meta name="keywords" content="">
  <link href="" rel="stylesheet">
  <link rel="icon" href="image/1.ico" type="image/x-icon">
  <link rel="shortcut icon" href="image/1.ico" type="image/x-icon">
  <link rel="stylesheet" type="text/css" href="fonts.css">
  <script type="text/javascript" src="js/dat.gui.min.js"></script>
  <script type="text/javascript" src="js/p5.min.js"></script>
  <script type="text/javascript" src="js/gif.js"></script>
  <script type="text/javascript" src="js/p5.dom.min.js"></script>


  <input id="img-path" type="file" />

  <style type="text/css">
    *{
      margin:0;
      padding:0;
    }

    #credits {
      font-size: 12px;
      position: absolute;
      bottom: -25px;
      right: 15px;
      opacity: 0.6;
      color: #ffffff;
      max-width: 70%;
      text-align: right;
      line-height: 20px;
    }


    .logo {
      font-size: 12px;
      position: absolute;
      bottom: 80px;
      left: 25px;
      color: #ffffff;
      max-width: 70%;
      line-height: 20px;
      opacity: 0.7;
    }

    .iconlink{
      bottom: 50px;
      margin-right: 0px;
    }

    #img-path {
      display: none;
    }
    .progress-box{
      position: absolute;
      left: 0;
      bottom: 0;
      width: 100%;
    }
    .progress-bar{
      height: 3px;
      width: 0%;
      background-color: #e61d5f;
    }
    .save-gif-tip{
      display: none;
      margin-bottom: 5px;
      text-align: center;
      font-size: 16px;
      color: white;
    }
  </style>

  <script>
    var _hmt = _hmt || [];
    (function() {
      var hm = document.createElement("script");
      hm.src = "https://hm.baidu.com/hm.js?44f8fa2f0b239ea3093628142486b48a";
      var s = document.getElementsByTagName("script")[0]; 
      s.parentNode.insertBefore(hm, s);
    })();
  </script>


</head>
<body>

 <div id="credits"> 
  <div class = "socaial" style="margin-right:10px">Created by @Yasai</div>
  <div class = "socaial" style="margin-right:10px; margin-bottom: -40px">©️All my products may be used in both personal and commercial projects   </div>
  <div class ="iconlink"> 
    <span><a class="icon-weibo" href="https://weibo.com/psaiaevegas/profile?rightmod=1&wvr=6&mod=personnumber"  target="_blank"  data-icon="&#xe906;" ></a></span>
    <span><a class="icon-zhihu" href="https://www.zhihu.com/people/wang-ya-sai/activities"  target="_blank"  data-icon="&#xe907;"></a></span>
    <span><a class="icon-instagram" href="http://instagram.com/yasaisai"  target="_blank"  data-icon="&#xe903;"></a></span>
    <span><a class="icon-twitter" href="https://twitter.com/yasai_wang"  target="_blank"  data-icon="&#xe905;"></a></span>
  </div>

</div>
<div class = "logo" style="margin-left:10px; margin-bottom: -40px; "><a href = "https://wangyasai.github.io/designtools.html"><img src="logo.png" style ="width: 40px"></a></div>

<script type="text/javascript">

  var type;
  var options ={  
    Background :'#0A0A0A',
    Color1 : '#FF3054',
    Color2 : '#4614E9',
    Range: 50,
    Speed : 25,
    Counts : 1000,
    Size : 5,
    Direction: 'Center-Outward',

    Random: function () { 
      var Color1 = random(['#3370ff','#ff3389','#27ff6e','#27f7ff']); 
      color1Control.setValue(Color1);

      var Color2 = random(['#3370ff','#ff3389','#27ff6e','#27f7ff']);  
      color2Control.setValue(Color2);   

      var speed = random(10,30);
      speedControl.setValue(speed);

      var range = random(100);
      RangeControl.setValue(range);

      var points = random(300,2000);
      PointsControl.setValue(points);

      var Size = random(1,10);
      SizeControl.setValue(Size);

      var Direction = random( ['Center-Outward', 'Center-Inward','Left','Right','Up','Down'] );  
      DirControl.setValue(Direction);   

    },
    Save : function(){
      saveFrames("Star-Emission", "png", 1, 1);
    }

  }

  var text, gui, config,BgControl, BgColor,color1Control,color2Control,speedControl,PointsControl,RangeControl,SizeControl,DirControl,RangeControl;
  window.onload = function() {
    gui = new dat.GUI();

  //folder1
  var folder1 = gui.addFolder('Controls');

  BgControl = folder1.addColor(options, 'Background');
  BgControl.onChange(draw);

  color1Control = folder1.addColor(options, 'Color1');
  color1Control.onChange(draw);

  color2Control = folder1.addColor(options, 'Color2');
  color2Control.onChange(draw);

  RangeControl = folder1.add(options, 'Range',0,400);
  RangeControl.onChange(draw);

  speedControl = folder1.add(options, 'Speed',10,40);
  speedControl.onChange(setup);

  PointsControl = folder1.add(options, 'Counts',100,4000);
  PointsControl.onChange(setup);

  SizeControl = folder1.add(options, 'Size',1,15);
  SizeControl.onChange(setup);

  DirControl = folder1.add(options, 'Direction',['Center-Outward',  'Center-Inward','Left','Right','Up','Down'] );
  DirControl.onChange(setup);

  var RandomControl = folder1.add(options, 'Random');

  var SaveControl = folder1.add(options, 'Save');

  folder1.open();

};


//rgb to hex颜色转换
function componentToHex(c) {
  var hex = c.toString(16);
  return hex.length == 1 ? "0" + hex : hex;
}

function rgbToHex(r, g, b) {
  return "#" + componentToHex(r) + componentToHex(g) + componentToHex(b);
}


</script>

<script type="text/javascript" src="js/sketch.js"></script>
</body>

</html>

